<template>
  <div class="organize">
    <!-- tab页面 -->
    <div class="tabHead">
      <div class="title">产品规格</div>
      <el-tabs v-model="params.goods_price_type" v-if="goodCate.length">
        <el-tab-pane :label="item.name" :name="item.key" v-for="(item, inx) in goodCate" :key="inx"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="list">
      <v-list
        :api="api.getUrl"
        ref="list"
        cards="1"
        :cols="cols"
        :params="params"
        v-if="params.union_id"
        @afterFetchData="getData"
      >
        <template slot="search">
          <el-button size="small" class="el-button--primary" @click.native="editBefo(0)">新增价格</el-button>
          <el-dropdown trigger="click" @command="operateBatch">
            <el-button size="small" class="ml10" :disabled="!checkedArr.length">
              批量操作
              <el-icon type="ios-arrow-down"></el-icon>
            </el-button>
            <el-dropdownMenu slot="dropdown">
              <el-dropdownItem command="0">批量复制</el-dropdownItem>
            </el-dropdownMenu>
          </el-dropdown>
          <el-button size="small" @click.native="setSync">同步价格</el-button>
          <el-select
            size="small"
            v-model="unionGroup.value"
            placeholder="联盟"
            class="w100"
            @change="getListByUnion"
          >
            <el-option
              v-for="(val, inx) in unionGroup.option"
              :key="inx"
              :label="val.name"
              :value="val.union_id"
            ></el-option>
          </el-select>
          <el-select
            size="small"
            placeholder="版本"
            class="w120 fr"
            v-model="params.goods_price_version"
            @change="initCheck"
          >
            <el-option
              v-for="(val, inx) in config.goods_price_version"
              :key="inx"
              :label="val.name"
              :value="val.key"
            ></el-option>
          </el-select>
        </template>
        <template slot="head" slot-scope="head">
          <thead>
            <th>
              <el-checkbox size="mini" v-model="isCheckAll" @change="checkAll"></el-checkbox>
            </th>
            <th>规格</th>
            <th>规格ID</th>
            <th>产品价格分类</th>
            <th>价格类型</th>
            <th>价格</th>
            <th>备注</th>
            <th>操作</th>
          </thead>
        </template>
        <template slot="item" slot-scope="props">
          <tr>
            <td>
              <el-checkbox @change="checkItem" v-model="checkObject[props.item.id]"></el-checkbox>
            </td>
            <td>
              <span>{{ props.item.type || '-' }}</span>
            </td>
            <td>
              <span>{{props.item.type_id || '-'}}</span>
            </td>
            <td>
              <span
                v-if="props.item.goods_price_type"
              >{{ props.item.goods_price_type | goodPriceType}}</span>
              <span v-else>-</span>
            </td>
            <td>
              <span v-if="props.item.price_type === 1">规格</span>
              <span v-if="props.item.price_type === 2">步长</span>
              <span v-if="!props.item.price_type">-</span>
            </td>
            <td>
              <span v-if="props.item.price" class="inflex">
                <span class="font-red">￥{{ (props.item.price/1000).toFixed(2) }}&nbsp;</span>
                元/
                <span v-if="props.item.goods_unit !== 'one'">{{ props.item.step }}</span>
                <span>{{ props.item.goods_unit | goodUnit}}/{{ props.item.price_unit | dateUnit }}</span>
              </span>
              <span v-else>-</span>
            </td>

            <!-- <td>
              <span v-if="props.item.unit">{{ props.item.unit | dateUnit}}</span>
              <span v-else>-</span>
            </td>-->
            <td>{{ props.item.remark || '-' }}</td>
            <td>
              <el-button
                class="icon-p7"
                type="primary"
                size="mini"
                icon="el-icon-edit"
                title="编辑"
                @click.native="editBefo(1, props.item)"
              ></el-button>
              <el-button
                class="icon-p7"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                title="删除"
                @click.native="deleBefo(props.item)"
              ></el-button>
            </td>
          </tr>
        </template>
      </v-list>
    </div>
    <v-tips :shows.sync="tip.show" :msg="tip.msg" :subFuc="deleteItem"></v-tips>
    <el-dialog
      :show-close="true"
      :close-on-click-modal="false"
      :visible.sync="dialog.show"
      :title="dialog.title"
      top="10vh"
      width="600px"
      @close="$refs.editForm.$refs.form.clearValidate();item = {};"
    >
      <editForm
        ref="editForm"
        :isEdit="dialog.isEdit"
        :union="unionGroup.option"
        :item="item"
        :version="params.goods_price_version"
        @close="dialog.show = false;"
        @refresh="$refs.list.fetchData();"
      ></editForm>
    </el-dialog>
    <el-dialog
      :show-close="true"
      :close-on-click-modal="false"
      :visible.sync="copy.show"
      :title="copy.title"
      width="800px"
      @close="copy.data=[]"
    >
      <copyView :idArr="checkedArr" :data="copy.data" :version="config.goods_price_version"></copyView>
    </el-dialog>
  </div>
</template>

<script>
import editForm from "./commpoents/view";
import copyView from "./commpoents/copy_view";
import { cacheConfig, cacheUnion } from "@cache";
export default {
  components: {
    editForm,
    copyView
  },
  watch: {
    "params.goods_price_type": {
      handler(val) {
        this.initCheck();
      }
    }
  },
  data() {
    return {
      activeName: "",
      cols: "60,150,0,0,0,0,0,110",
      params: {
        union_id: "",
        goods_price_type: "",
        goods_price_version: ""
      },
      unionGroup: {
        value: "",
        option: []
      },
      api: {
        getUrl: "order.get_price"
      },
      tip: {
        msg: "是否删除此价格？",
        show: false
      },
      dialog: {
        title: "提示",
        show: false,
        isEdit: false
      },
      copy: {
        title: "价格复制",
        show: false,
        data: []
      },
      goodCate: [],
      config: {},
      itemId: "",
      item: {},
      listData: {},
      checkedArr: [],
      checkObject: {},
      isCheckAll: false
    };
  },
  methods: {
    getListByUnion(union_id) {
      this.params.union_id = union_id;
    },
    setSync() {
      this.$api.jget("order.sync_price").then(res => {
        if (res.status === 1) {
          this.$success(res.msg);
          this.$refs.list.fetchData();
        } else {
          this.$error(res.msg);
        }
      });
    },
    deleBefo(item) {
      this.tip.show = true;
      this.itemId = item.id;
    },
    deleteItem() {
      let params = { id: this.itemId };
      this.$api.jget("order.del_price", params).then(res => {
        if (res.status === 1) {
          this.$success(res.msg);
          this.$refs.list.fetchData();
        } else {
          this.$error(res.msg);
        }
      });
    },
    editBefo(isEdit, item) {
      if (isEdit) {
        if (item) {
          this.item = item;
        }
        this.dialog.show = this.dialog.isEdit = true;
        this.dialog.title = "编辑价格";
      } else {
        this.dialog.show = true;
        this.dialog.isEdit = false;
        this.dialog.title = "新增价格";
        // this.$nextTick(() => {
        //   this.$refs.editForm.$refs.form.resetFields();
        // });
      }
    },
    operateBatch(val) {
      switch (val) {
        case "0":
          this.copy.show = true;
          this.setCopyData();
          break;

        default:
          break;
      }
    },
    checkItem(val) {
      let temp = [];
      for (const key in this.checkObject) {
        if (this.checkObject[key]) {
          temp.push(key);
        }
      }
      this.checkedArr = temp;
      this.isCheckAll = !!this.checkedArr.length;
    },
    checkAll() {
      let temp = [];
      if (this.isCheckAll && !!this.listData.list.length) {
        this.listData.list.forEach(el => {
          temp.push(el.id);
          this.checkObject[el.id] = true;
        });
        this.checkedArr = temp;
      } else {
        this.checkedArr = [];
        for (const key in this.checkObject) {
          this.checkObject[key] = false;
        }
      }
    },
    getData(data) {
      this.listData = data;
    },
    setCopyData() {
      let temp = [];
      this.checkedArr.forEach(el => {
        this.listData.list.forEach(item => {
          if (el == item.id) {
            temp.push(item);
          }
        });
      });
      this.copy.data = temp;
    },
    initCheck() {
      this.checkObject = {};
      this.checkedArr = [];
      this.isCheckAll = false;
    }
  },
  mounted() {
    this.unionGroup.option = cacheUnion.load();
    this.params.union_id = this.unionGroup.value = this.unionGroup.option[0].union_id;

    this.config = cacheConfig.load();
    this.goodCate = cacheConfig.load().goods_price_type;
    this.params.goods_price_type = this.activeName = this.goodCate[0].key;
    this.params.goods_price_version = this.config.goods_price_version[0].key;
  }
};
</script>

<style lang="scss" scoped>
.organize {
  height: 100%;
  background-color: #fff;
}
/deep/.tabHead {
  display: flex;
  align-items: center;
  padding: 0 20px;
  .title {
    min-width: 100px;
  }
  .el-tabs {
    width: -webkit-fill-available;
    z-index: 0;
    & > .el-tabs__header {
      margin: 0;
      .el-tabs__nav-wrap::after {
        display: none;
      }
    }
  }
  .el-tabs__item {
    height: 60px;
    line-height: 60px;
  }
  .el-tabs__item.is-active {
    color: #3860f4;
  }
  .el-tabs__active-bar {
    background-color: #3860f4;
  }
}
/deep/.list {
  height: calc(100% - 60px);
  overflow: auto;
  padding: 20px;
  background-color: #f5f5f5;
  table.table thead th {
    background-color: #fff;
    color: #aaa;
    font-weight: 100;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #3860f4;
    border-color: #3860f4;
  }
}
.nameOverflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 113px;
  display: inline-block;
}
</style>